<script setup>
import {computed, reactive, ref} from "vue";

const items = ref([{message: 'Foo', a: 'a', id: 1}, {message: 'Bar', a: 'b', id: 2}])

// 定义一个要遍历的对象
const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})


// 定一个作为一个父属性
const parentMessage = ref('Parent')


// `items` 是一个数组的 ref
// 过滤后的结果，并不会导致dom元素的重新渲染，vue会有一个中方法直接把值替换掉
items.value = items.value.filter((item) => item.message.match(/Foo/))
console.log(items.value)
// 通过计算属性来保存过滤后的结果，而不破环原有数据
const numbers = ref([1, 2, 3, 4, 5, 8])

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})


</script>

<template>
  <!--  v-for遍历数据-->
  <li v-for="item in items">
    <!--    标签内可以访问除了item其余的内容-->
    {{ parentMessage }} {{ item.message }}
  </li>
<!--  我们可以接收第二个可选参数作为索引-->
  <li v-for="(item, index) in items">
    <!--    标签内可以访问除了item其余的内容-->
    {{ index + 1 }} {{ item.message }}
  </li>


<!--  使用解构语法遍历-->
  <li v-for="{ message, a } in items">
    {{ message }} {{a}}
  </li>

  <!-- 有 index 索引时 -->
  <li v-for="({ message }, index) in items">
    {{ message }} {{ index }}
  </li>

<!--  可以将in改为of-->
  <li v-for="item of items">
    {{ item.message }}
  </li>

<!--  遍历对象中所有的value-->
  <ul>
    <li v-for="value in myObject">
      {{ value }}
    </li>
  </ul>

<!--  在遍历对象的过程中，也遍历key值-->
  <li v-for="(value, key) in myObject">
    {{ key }}: {{ value }}
  </li>

  <!--  在遍历对象的过程中，也遍历索引值-->
  <li v-for="(value, key, index) in myObject">
    {{ index }}. {{ key }}: {{ value }}
  </li>

<!--  遍历几次的一个使用-->
<!--  注意：遍历从1开始-->
  <span v-for="n in 10">{{ n }}</span>

<!--  当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。-->
<!--  这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：-->
  <!--
   这会抛出一个错误，因为属性 todo 此时
   没有在该实例上定义
  -->
<!--  <li v-for="todo in todos" v-if="!todo.isComplete">-->
<!--    {{ todo.name }}-->
<!--  </li>-->

<!--  :key 推荐加上 如果不加在一般情况下也不会出现问题-->
  <div v-for="item in items" :key="item.id">
    <!-- 内容 -->
    {{item.message}}
  </div>


  <li v-for="n in evenNumbers">{{ n }}</li>
  <li v-for="item in numbers">{{item}}</li>
</template>


<style scoped>

</style>
